<template>
	<view class="page">
		<view class="page_header"><navigation defaultButton="back">预约服务</navigation></view>
		<view class="page_panel">
			<view class="page_main">
				<view class="card_info">
					<image class="image" :src="detail.image" mode=""></image>
					<view class="info">
						<view class="info_header">
							<viwe class="title">
								<view class="titile_text">{{ detail.serviceName }}</view>
								<view class="sign green" v-if="detail.zhengce == $enums['服务政策']['公益']">公益</view>
								<view class="sign orange" v-if="detail.zhengce == $enums['服务政策']['常规']">常规</view>
							</viwe>
						</view>
						<view class="info_container">
							<view class="text">{{ detail.content }}</view>
						</view>
						<veiw class="info_footer">
							<view class="pirce" v-if="detail.money && detail.money > 0">￥{{ detail.money | toFixed(2) }}/次</view>
							<view class="pirce gratis" v-else>免费</view>
							<view class="subsidy">补贴：￥{{ detail.subsidy | toFixed(2) }}</view>
						</veiw>
					</view>
				</view>
				<view class="card_input">
					<view class="form-item first_form-item">
						<view class="form-item__name">
							<view class="label">服务地址</view>
							<view class="input">
								<text>{{ detail.address || '--' }}</text>
							</view>
						</view>
						<view class="form-item__value"></view>
					</view>
					<view class="form-item">
						<view class="form-item__name"><view class="label">服务时间</view></view>
						<view class="form-item__value">
							<view class="form-item__value-input">{{ detail.serviceStartTime | toDate('yyyy-MM-dd hh:mm') || '--' }}</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item__name"><view class="label">联系人</view></view>
						<view class="form-item__value">
							<view class="form-item__value-input">{{ detail.userName || '--' }}</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item__name"><view class="label">联系电话</view></view>
						<view class="form-item__value" @tap="phoneCall">
							<view class="form-item__value-input">
								{{ detail.phone || '--' }}
								<view class="icon"><text class="nursing-icon icondianhua"></text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="card_input">
					<view class="card_title">订单详情</view>
					<view class="form-item">
						<view class="form-item__name"><view class="label">订单编号</view></view>
						<view class="form-item__value">
							<view class="form-item__value-input" @tap="copy(detail.orderCode)">
								{{ detail.orderCode || '--' }}
								<view class="copy">复制</view>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item__name"><view class="label">创建时间</view></view>
						<view class="form-item__value">
							<view class="form-item__value-input">{{ detail.gmtCreate | toDate('yyyy-MM-dd hh:mm') || '--' }}</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item__name"><view class="label">成交时间</view></view>
						<view class="form-item__value">
							<view class="form-item__value-input">{{ detail.gmtModified | toDate('yyyy-MM-dd hh:mm') || '--' }}</view>
						</view>
					</view>
				</view>

				<view class="page_btn-panel">
					<button class="page_btn cancel" hover-class="page_btn-hover" v-if="detail.status ==  enums['机构订单状态']['待服务']" @tap="cancelOrder(detail.id)">取消订单</button>
					<button class="page_btn" hover-class="page_btn-hover" v-if="detail.status ==  enums['机构订单状态']['待服务']" @tap="goServe(detail.id)">前往服务</button>
					<button class="page_btn" hover-class="page_btn-hover" v-if="detail.status ==  enums['机构订单状态']['服务中']" @tap="completeOrder(detail.id)">完成服务</button>
				</view>
				<view class="hint" v-if="detail.status ==  enums['机构订单状态']['服务中']">收款请进行线下收款，确定收款后再完成服务哦～</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as serveApi from '@/api/orgApi/serve.js';
import pickers from '@/components/ming-picker/ming-picker.vue';
import hTimePicker from '@/components/h-timePicker/h-timePicker.vue';
export default {
	components: {
		pickers,
		hTimePicker
	},
	data() {
		return {
			enums: this.$enums,
			detail: {}
		};
	},
	methods: {
		getDetail() {
			serveApi
				.getOrderDetail({ id: this.id })
				.then(res => {
					if (res.code === 0) {
						this.detail = res.data;
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		copy(code) {
			let orderCode = String(code) || '';
			uni.showToast({
				title: '复制成功',
				duration: 1000
			});
		},
		phoneCall() {
			uni.makePhoneCall({
				phoneNumber: this.detail.phone
			});
		},
		completeOrder() {
			serveApi
				.completeOrder({ id: this.id })
				.then(res => {
					if (res.code === 0) {
						this.getDetail();
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		goServe() {
			serveApi
				.receiving({ id: this.id })
				.then(res => {
					if (res.code === 0) {
						this.getDetail();
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		cancelOrder() {
			serveApi
				.cancelOrder({ id: this.id })
				.then(res => {
					if (res.code === 0) {
						this.getDetail();
					}
				})
				.catch(e => {
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
	},
	onLoad(options) {
		if (options && options.id) {
			this.id = options.id;
			this.getDetail(options.id);
		}
	}
};
</script>

<style lang="stylus">
.page_btn
	margin-top 80rpx
.page_panel
	position absolute
	top calc(280rpx + var(--status-bar-height))
	right 0rpx
	bottom 0
	left 0rpx
	background-color rgba(243, 243, 243, 1)
	.page_main
		padding 0rpx 30rpx
		position relative
		top -140rpx
		right 0rpx
		left 0rpx
		bottom 0rpx
	.card_info
		display flex
		justify-content space-between
		padding 30rpx 32rpx
		box-sizing border-box
		background-color #FFFFFF
		border-box border-box
		border-radius 12rpx
		.image
			width 204rpx
			height 204rpx
			border-radius 23rpx
		.info
			flex 1
			margin-left 20rpx
			box-sizing border-box
			display flex
			flex-direction column
			justify-content space-between
			.info_header
				width 100%
				display flex
				justify-content space-between
				.title
					flex 1
					margin-right 10rpx
					letter-spacing 1rpx
					font-size 32rpx
					font-family PingFang SC
					font-weight 400
					color #333333
					display flex
					.titile_text{
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
						-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
						-webkit-line-clamp: 1; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
						word-wrap: break-word;
					}
					.sign
						margin-left 10rpx
						font-size 28rpx
						font-family PingFang SC
						font-weight 400
						color #FFFFFF
						padding 4rpx
						border-radius 8rpx
						transform scale(0.7)
					.green
						background-color rgba(0, 181, 0, 1)
					.orange
						background-color rgba(246, 132, 21, 1)
			.info_container
				flex 1
				margin-top 15rpx
				font-size 24rpx
				letter-spacing 1rpx
				font-family PingFang SC
				font-weight 400
				color #999999
				.text
					overflow hidden
					text-overflow ellipsis
					display -webkit-box // 将对象作为弹性伸缩盒子模型显示。
					-webkit-box-orient vertical // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
					-webkit-line-clamp 2 // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。此处为2行
					word-wrap break-word
			.info_footer
				margin-top 10rpx
				display flex
				justify-content space-between
				.organization
					background-color rgba(37, 143, 255, 0.1)
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #4594FF
					border-radius 10rpx
					padding 3rpx 8rpx
				.subsidy
					flex 1
					padding-left 20rpx
					display flex
					align-items flex-end
					justify-content flex-start
					font-size 24rpx
					font-family PingFang SC
					font-weight 500
					text-decoration line-through
					color #999999
				.pirce
					font-size 32rpx
					font-family PingFang SC
					font-weight bold
					color #FF4200
				.gratis
					color rgba(51, 51, 51, 1)
	.card_input
		margin-top 20rpx
		border-radius 12rpx
		background-color #FFFFFF
		padding 40rpx 25rpx 40rpx 25rpx
		.card_title
			font-size 28rpx
			font-family PingFang SC
			font-weight 400
			color #333333
		.form-item
			min-height auto
			margin-top 50rpx
			.form-item__name
				.label
					color rgba(153, 153, 153, 1)
				.input
					margin-top 10rpx
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #333333
			.form-item__value-input
				color rgba(51, 51, 51, 1)
				display flex
				align-items center
				justify-content flex-end
				.copy
					margin-left 30rpx
					font-size 24rpx
					font-family PingFang SC
					font-weight 400
					color #FB7B22
				.icon
					margin-left 20rpx
					padding 2rpx 8rpx 5rpx 8rpx
					border-radius 10rpx
					background-color rgba(211, 230, 255, 0.55)
					.nursing-icon
						font-size 25rpx
						color rgba(69, 148, 255, 1)
		.first_form-item
			margin-top 0rpx
.hint
	text-align center
	margin-top 20rpx
	font-size 24rpx
	font-family PingFang SC
	font-weight 400
	color #999999
</style>
